<template>
    <view class="myP">

      <u-navbar :is-back="false" title="个人中心" back-text='123' >


      <view class="slot-right" style="width: 100%;display: flex;justify-content: flex-end;" >
				<view>
                <image @click="goSettingM" style="width: 1rem;height:1rem;padding: 1rem;" src="../../style/image/my/A20.png" alt="">
                </view>
			</view>

      </u-navbar>

        <view class="my-header" >

            <view class="my-header-t">

            <view style="display: flex;align-items: center;">

<!--             
                    <u-upload height='100' width='100'  :deletable='false' :on-choose-complete='completeM' :before-upload="beforeUpload" max-count="1" >
          <view slot="addBtn" class="slot-btn" hover-class="slot-btn__hover" hover-stay-time="150">
			  <u-avatar :src="src" mode="circle"></u-avatar>
			</view>
      </u-upload> -->

      	  <u-avatar @click="completeM" :src="src" mode="circle"></u-avatar>
               
                <view style="padding: 0rem 0.5rem;">

                <view style="font-size: 0.89rem;font-family: PingFang SC;font-weight: bold;color: #FFFFFF;" >{{info.nickName==''||info.nickName==null?'暂未设置':info.nickName}}</view>

                <view style="display: flex;align-items: center;" >
                    <image style="width: 1rem;height:1rem;" src="../../style/image/my/A16.png" alt="">
                    <view style="font-size: 0.78rem;font-family: PingFang SC;font-weight: 400;color: #FFFFFF;" >{{info.role==null?'暂未设置':info.role.roleName}}</view>
                </view>


                </view>
            
            </view>
              

                <view>
                    <image @click="yuanS" style="width: 7rem;height:1.6rem;" src="../../style/image/my/A21.png" alt="">
                </view>

            </view>

            <view style="display: flex;margin: 1rem 0.5rem 0.5rem 0.5rem;align-items: center;" >
            <view style="font-size: 0.73rem;font-family: PingFang SC;font-weight: 400;color: #FFFFFF;" >我的余额</view>
            <view  @click="enM" style="background: white;padding: 0.1rem 0.5rem;margin-left: 0.5rem;border-radius: 5px;color: #03c080;" >提现</view>
            </view>

            <view class="yuE" >{{info.blance}}元</view>

        </view>

        <view class="my-list">

            <view  @click="goItem(item)" class="my-list-item" v-for="(item,index) in myList " :key="index" >
                
                <view  style="display: flex;align-items: center;">
                    <image style="width:1.2rem;height:1.2rem;" :src="item.image" alt="">
                    <view style="font-size: 0.89rem;font-family: PingFang SC;font-weight: 399;color: rgb(104, 104, 104);margin-left:1rem" >{{item.value}}</view>
                </view>

                
                  <view style="display: flex;align-items: center;" >
                     <view v-show="item.type=='customer' " style="margin-right: 1rem;font-size: 0.78rem;font-family: PingFang SC;font-weight: 300;color: #9A9A9A;" >{{content}}</view>
                      <image style="width: 0.5rem;height:0.8rem" src="../../style/image/my/A15.png" alt="">
                  </view>
                  
               

            </view>
        
        </view>

      <u-modal
      v-model="modalShow"
      @confirm="confirm"
      :show-title="true"
      title='拨打电话'
      :show-cancel-button="true"
      :content="content"
    ></u-modal>




     <!-- <bar></bar> -->
    </view>
</template>

<script lang='ts'>
import { Component, Prop, Vue, Watch, Emit } from "vue-property-decorator";

import bar from "../home/topbar.vue";

import {
  findUserInfo,
  uploadApi,
  saveUserInfo,
  myEarnings,
} from "../../utils/uniApi";
import { AppModule } from "../../store/modules/app";

@Component({
  //   @Component  是一个装修器   不可以在下面写语句
  name: "test",
  components: {
    bar,
  },
})
export default class extends Vue {
  @Prop({
    type: String, // 父组件传递给子组件的数据类型
    required: false, // 是否必填
    default: " ", // 默认值， 如果传入的是 Object，则要 default: ()=>({}) 参数为函数
  })
  msg!: string;

  public src: any = "";

  public content = "1771321333";

  public kPhone = "";
  public modalShow = false;

  public action = "http://www.example.com/upload";
  public fileList = [
    {
      // url: 'http://pics.sc.chinaz.com/files/pic/pic9/201912/hpic1886.jpg',
    },
  ];

  public info:any = {
    id: "",
    parentId: "", //上级用户ID
    parentPhone: "", //	父级账号（拥有该字段的人代表是子账号）
    pwd: "", //	密码
    payPwd: "", //	支付密码
    roleId: "", //	角色
    roleEndTime: "", //	会员到期时间
    phone: "", //手机号
    card: "", //证件号
    realName: "", //真实姓名
    registTime: "", //	注册时间
    blackAccountName: "", //支付宝用户名（姓名）
    blackNum: "", //	支付宝账号
    headImg: "", //	头像
    nickInitial: "", //	昵称首字母
    nickName: "HIPPY", //	昵称
    oId: "", //	所属品牌
    remarks: "", //余额
    count: "", //推荐人数
    clientid: "", //设备ID
    recCode: "", //推荐码
    blance: "", //余额
    supportStaffQq: "", //	客服QQ
    supportStaffPhone: "", //客服电话
    role: {
      roleName: "暂未设置会员等级", //会员名称
    }, //会员信息
  };

  public myList = [
    {
      image: require("../../style/image/my/A7.png"),
      value: "我的订单",
    },
    {
      image: require("../../style/image/my/A9.png"),
      value: "收货地址",
    },
    //  {
    //     image:require('../../style/image/my/订单.png'),
    //     value:'我的订单',
    // },
    {
      image: require("../../style/image/my/A22.png"),
      value: "实名认证",
    },
    {
      image: require("../../style/image/my/A13.png"),
      value: "账号信息",
    },
    // {
    //   image: require("../../style/image/my/A8.png"),
    //   value: "型号说明",
    // },
    {
      image: require("../../style/image/my/A24.png"),
      value: "常见问题",
    },
    {
      image: require("../../style/image/my/A12.png"),
      value: "关于我们",
    },
    {
      type: "customer",
      image: require("../../style/image/my/A25.png"),
      value: "专属客服",
    },
  ];

  public incomeData:any = {
    freezeMoney: "", //	冻结金额
    totalAmount: "", //	总收益
    ktxMoney: "", //可提现金额
  };

  onReady() {
    console.log("onReadyonReadyonReady");
  }
  onLaunch() {
    console.log("个人中心onLaunchonLaunchonLaunch");
  }
	onShow(){
		this.info={}
		this.src=""
		this.findUserInfoM()
		// console.log(this.info,'info')
	}
  created() {}

  onUniNViewMessage(){
    console.log('nihoa12312312312')
  }

  mounted() {


    this.indexM();


    // console.log('AppModule.myData---mounted',AppModule.myData)

    // if( AppModule.myData===''){

    // //  alert('1111')
    //    this.indexM()
    //   //  uni.setStorageSync('myOnce', false)
    // }else{
    //       // alert('123')

    //       this.incomeData = AppModule.myData

    // }


  }



  indexM() {

    uni.showLoading({
      title: "加载中",
    });

    this.content = uni.getStorageSync("otherData").supportStaffPhone;

    this.findUserInfoM();

    let paramss = {
      userId:
        uni.getStorageSync("userId") == ""
          ? ""
          : parseInt(uni.getStorageSync("userId")),
      loginStatus: "proxy", // 登录身份  proxy 代理  shop 商户
    };

    myEarnings(paramss).then((res: any) => {
      console.log("ressh收益", res);
      this.incomeData = res.data.data;

      AppModule.myDataAction( res.data.data)
    });
  }

  yuanS() {
    uni.navigateTo({
      url: "../item/membershipUp/index",
    });
  }

    onPullDownRefresh() {

    console.log("refresh");
    this.indexM();
    setTimeout(()=>{
      // uni.switchTab({
      //   url: "../../pages/my/index",
      // });
     uni.stopPullDownRefresh();
    }, 1000);
    
  }


  findUserInfoM() {
    let params = {
      userId:
        uni.getStorageSync("userId") == ""
          ? ""
          : parseInt(uni.getStorageSync("userId")),
    };

    findUserInfo(params).then((res: any) => {
      console.log("个人信息res", res);

      this.info = res.data.data;
      this.src = res.data.data.headImg;
      setTimeout(() => {
        uni.hideLoading();
      }, 500);
    });
  }

  confirm() {
    console.log("打电话");
    uni.makePhoneCall({
      // 手机号
      phoneNumber: this.content,
      // 成功回调
      success: (res) => {
        console.log("调用成功!");
      },
      // 失败回调
      fail: (res) => {
        console.log("调用失败!");
      },
    });
  }

  goItem(data: any) {
    console.log("我的订单", data.value);

    if (data.value == "我的订单") {
      console.log("123");
      uni.navigateTo({
        url: "../../pages/item/myOrder/order",
      });
    } else if (data.value == "收货地址") {
      uni.navigateTo({
        url: "../../pages/order/address",
      });
    } else if (data.value == "关于我们") {
      uni.navigateTo({
        url: "../../pages/my/our",
      });
    } else if (data.value == "专属客服") {
      this.modalShow = true;
    } else if (data.value == "常见问题") {
      uni.navigateTo({
        url: "../../pages/my/promble",
      });
    } else if (data.value == "账号信息") {
      uni.navigateTo({
        url: "../../pages/my/accountInfo",
      });
    } else if (data.value == "实名认证") {
      uni.navigateTo({
        url: "../../pages/aiplay/atte",
      });
    }
  }

  enM() {
    uni.navigateTo({
      url: `../withdraw/index`,
    });
  }

  beforeUpload(data: any) {
    console.log("上传", data);
  }
  // finishM(res, index, lists, name) {
  //   console.log("上传完成",res, index, lists, name);
  // }
  completeM() {
	console.log(111)
    var that = this;
    uni.chooseImage({
      count: 1,
      sizeType: ["compressed"],
      success(data: any) {
        // tepFliePaths 保存图片路径
        // var imgFiles = res.tempFilePaths;
        // // 因为没写下标， 直接以数组形式输出
        console.log(data);

        // uploadApi(params).then((res:any)=>{
        //           console.log(res,'图片')
        //     })

        uni.uploadFile({
          url: "http://cdb.lianmengxiton.cn/app/upload",
          filePath: data.tempFilePaths[0],
          name: "file",
          formData: {
            file: data.tempFiles,
          },
          success: (uploadFileRes: any) => {
            console.log(that.src);
            console.log(
              JSON.parse(uploadFileRes.data),
              "返回uploadFileResuploadFileRes"
            );
            let data = JSON.parse(uploadFileRes.data);
            that.src = data.data;

            let params = {
              userId:
                uni.getStorageSync("userId") == ""
                  ? ""
                  : parseInt(uni.getStorageSync("userId")),
              headImg: data.data,
            };

            saveUserInfo(params).then((res: any) => {
              uni.showToast({
                title: res.data.message,
                icon: "none",
                duration: 2000,
              });
            });
          },
        });
      },
    });
  }

  goSettingM() {
    console.log(123213);

    uni.navigateTo({
      url: "../set/index",
    });
  }
}
</script>

<style  lang="scss"  scoped>
// /deep/.u-list-item {
//   width: 110px;
//   height: 110px;
//   // display: none;
// }

/deep/.u-preview-image {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 50%;
}
/deep/.u-list-item {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
}

.slot-wrap {
  display: flex;
  align-items: center;
  flex: 1;
  /* 如果您想让slot内容占满整个导航栏的宽度 */
  /* flex: 1; */
  /* 如果您想让slot内容与导航栏左右有空隙 */
  /* padding: 0 30rpx; */
}

.myP {
  margin: 0rem 0.5rem;
}

.my-header {
  background-image: url("../../style/image/my/A11.png");
  border-radius: 0.8rem;
  background-position: center;
  background-repeat: round;
  background-repeat: no-repeat;
  padding: 1rem 0rem 1rem 0.3rem;
}
.my-header-t {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-left: 0.5rem;
}

.yuE {
  font-size: 0.83rem;
  font-family: PingFang SC;
  font-weight: 300;
  color: #ffffff;
  margin: 1rem 0.5rem 0.5rem;
}

.my-list-item {
  border-bottom: 1px solid #f0f0f0;
  display: flex;
  justify-content: space-between;
  align-items: center;

  padding: 0.1rem 0.1rem 0.5rem 0.1rem;
  margin: 0.5rem;
}
</style>